import React, { useEffect, useState, useCallback } from 'react'
import Css from "./css/area.module.css"
function Area(props:any) {
    const titles = ['热门', '景点', '地铁', '商圈', '高校', '周边游', '行政区', '机场/火车站']
    const [obj, setObj] = useState([]);
    const [ditieData, setditieData] = useState([])
    let ditieData1: any = []

    const [luxianData, setluxianData] = useState([])
    const [isDitie, setisDitie] = useState(false)
    const data: any = [];
    const cityname = props.cityname?props.cityname:"上海";
    useEffect(() => {
        const url: string = `/getareadata?city=${cityname}`
        fetch(url, {
            method: "GET",
            // mode: "cors",     //跨域资源共享
            // credentials: "include",   //跨域携带cookie
        })
            .then(res => res.json())
            .then(res_data => {
                setObj(res_data.info[0].hot);
                ditieData1 = res_data.info[0].metro
                setditieData(ditieData1)
                // Object.keys(ditieData1[0])[0]
                setluxianData(res_data.info[0].metro[0][Object.keys(ditieData1[0])[0]])
                for (const key in res_data.info[0]) {
                    data.push(res_data.info[0][key])
                }
            })
            .catch(err => {
                console.log("请求错误", err);
            })
    }, [])
    const changeObj = useCallback(e => {
        for(let i=0;i<e.target.parentElement.children.length;i++){
            e.target.parentElement.children[i].style.color="rgb(72, 72, 72)"
        }
        
        e.target.style.color="rgb(15, 139, 144)"
        if (e.target.innerText == "地铁") {
            setisDitie(true);
            return;
        } else {
            setisDitie(false);
        }
        const index: number = titles.indexOf(e.target.innerText)
        setObj(data[index])
    }, [])
    const changeLuxian = useCallback(e => {
        const index = e.target.dataset.index;
        const luxian = e.target.innerText;
        setluxianData(ditieData1[index][luxian])
    }, [])

    //给父组件传值
    const changeDidian = useCallback(e=>{
        props.fn(cityname+"市"+e.target.innerText);
    },[])

    const ditie = <div className={Css.ditie}>
        <ul className={Css.left}>
            {ditieData.map((el, index) => <li key={index * 2} data-index={index} onClick={changeLuxian}>{Object.keys(el)[0]}</li>)}
        </ul>
        <ul className={Css.right}>
            {luxianData.map((el, index) => <li key={index * 3} onClick={changeDidian}>{el}</li>)}
        </ul>
    </div>
    const others = <ul>
        {obj.map((el, index) => <li key={index} onClick={changeDidian}>{el}</li>)}
    </ul>
    return (
        <div>
            <div className={Css.box}>
                <div className={Css.title}>
                    <ul>
                        {titles.map((el, index) => <li onClick={changeObj} key={index}>{el}</li>)}
                    </ul>
                </div>
                <div className={Css.content}>
                    {isDitie ? ditie : others}
                </div>
            </div>
        </div>
    )
}

export default Area
